<ix-modal-header [requiredRoles]="requiredRoles" [title]="title" [loading]="isLoading()"></ix-modal-header>

<div class="container">
  <form class="form" [formGroup]="form" (submit)="onSubmit()">
    <ix-fieldset [title]="'Instance Configuration' | translate">
      <ix-checkbox
        formControlName="autostart"
        [label]="'Autostart' | translate"
      ></ix-checkbox>
    </ix-fieldset>

    @if (isVm) {
      <ix-fieldset [title]="'Operating System' | translate">
        <ix-combobox
          formControlName="image_os"
          [label]="'OS Type' | translate"
          [allowCustomValue]="true"
          [tooltip]="instancesHelptext.osImage.tooltip| translate"
          [provider]="imageOsProvider"
        ></ix-combobox>
      </ix-fieldset>
    }

    <ix-fieldset [title]="'CPU & Memory' | translate">
      <ix-input
        formControlName="cpu"
        [label]="'CPU Configuration' | translate"
        [tooltip]="instancesHelptext.cpuTooltip | translate"
        [required]="isVm"
        [hint]="isVm ? undefined : (instancesHelptext.cpuHint | translate)"
      ></ix-input>

      <ix-input
        formControlName="memory"
        [label]="'Memory Size' | translate"
        [tooltip]="instancesHelptext.memoryTooltip | translate"
        [format]="formatter.memorySizeFormatting"
        [parse]="formatter.memorySizeParsing"
        [required]="isVm"
        [hint]="isVm ? undefined : (instancesHelptext.memoryHint | translate)"
      ></ix-input>
    </ix-fieldset>

    @if (isVm) {
      <ix-fieldset [title]="'VNC' | translate">
        <div [matTooltip]="isStopped ? '' : ('Instance must be stopped to update VNC.' | translate)">
          <ix-checkbox
            formControlName="enable_vnc"
            [label]="'Enable VNC' | translate"
          ></ix-checkbox>

          @if (form.getRawValue().enable_vnc) {
            <ix-input
              formControlName="vnc_port"
              type="number"
              [label]="'VNC Port' | translate"
              [required]="true"
            ></ix-input>

            <ix-input
              formControlName="vnc_password"
              type="password"
              [label]="'VNC Password' | translate"
              [hint]="'VNC password is not cryptographically secure. You should not rely on it as a single authentication mechanism for your VMs.' | translate"
            ></ix-input>
          }
        </div>
      </ix-fieldset>
    }

    @if (isContainer) {
      <ix-fieldset [title]="'Environment' | translate">
        <ix-list
          formArrayName="environmentVariables"
          [empty]="form.controls.environmentVariables.controls.length === 0"
          [label]="'Environment Variables' | translate"
          (add)="addEnvironmentVariable()"
        >
          @for (envControl of form.controls.environmentVariables.controls; track envControl; let i = $index) {
            <ix-list-item
              [formGroupName]="i"
              [label]="'Environment Variable' | translate"
              (delete)="removeEnvironmentVariable(i)"
            >
              <div class="environment-variable">
                <ix-input
                  formControlName="name"
                  [label]="'Name' | translate"
                  [required]="true"
                ></ix-input>

                <ix-input
                  formControlName="value"
                  [label]="'Value' | translate"
                  [required]="true"
                ></ix-input>
              </div>
            </ix-list-item>
          }
        </ix-list>
      </ix-fieldset>
    }

    @if (isVm) {
      <ix-fieldset [title]="'Security' | translate">
        <ix-checkbox
          formControlName="secure_boot"
          [label]="'Secure Boot' | translate"
          [tooltip]="instancesHelptext.secureBootTooltip | translate"
        ></ix-checkbox>
      </ix-fieldset>
    }

    <div class="actions">
      <button
        mat-button
        type="submit"
        color="primary"
        ixTest="save"
        [disabled]="form.invalid || isLoading()"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </form>
</div>
